<!--
  ~ MIT License
  ~
  ~ Copyright (c) 2021-2022 yangrunkang
  ~
  ~ Author: yangrunkang
  ~ Email: yangrunkang53@gmail.com
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~ of this software and associated documentation files (the "Software"), to deal
  ~ in the Software without restriction, including without limitation the rights
  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~ copies of the Software, and to permit persons to whom the Software is
  ~ furnished to do so, subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~ SOFTWARE.
  -->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="index">
<!--css-->
<link th:fragment="css" type="text/css" rel="stylesheet" th:href="${ossStatic} + @{/css/content/content.css}"/>
<link th:fragment="css" type="text/css" rel="stylesheet" th:href="${ossStatic} + @{/css/common/img.css}"/>
<!--脚本-->
<script async="async" th:fragment="js" type="text/javascript" th:src="${ossStatic} + @{/js/content/content.js}"></script>
<script async="async" th:fragment="js" type="text/javascript" th:src="${ossStatic} + @{/js/common/comment.js}" th:if="${session?.cv_user_id} and ${contentIndexDto.content.status.name() == 'NORMAL'}"></script>
<script async="async" th:fragment="js" type="text/javascript" th:src="${ossStatic} + @{/js/common/common.js}"></script>
<!--加载复制插件-->
<script async="async" th:fragment="js" type="text/javascript" th:src="${ossStatic} +@{/plugins/clipboard/clipboard.min.js}"></script>
<!--编辑器-->
<link th:fragment="css" type="text/css" rel="stylesheet" th:href="'/plugins/cherry/cherry-markdown.min.css?v='+${staticSourceVersion}"/>
<script th:fragment="js" type="text/javascript" th:src="${ossStatic} +@{/plugins/cherry/cherry-markdown.min.js}"></script>
<!--内容-->
<div th:fragment="content">
    <div class="container" th:if="${contentIndexDto.content.statement} != null" th:include="fragments/index::statement"></div>
    <div class="container">
        <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2 alert alert-warning" th:if="${contentIndexDto.content.status.name()} == 'DRAFT' or ${contentIndexDto.content.status.name()} == 'ONLY_SELF_CAN_SEE'">
            <div th:if="${contentIndexDto.content.status.name()} == 'DRAFT'" class="fw-bold">预览·该页内容为草稿,仅您自己可见</div>
            <div th:if="${contentIndexDto.content.status.name()} == 'ONLY_SELF_CAN_SEE'" class="fw-bold">预览·该页内容仅您自己可见</div>
            <div th:include="fragments/index::content_not_public_tips"></div>
        </div>
        <div class="row g-2">
            <div class="col-lg-9 mb-2">
                <div th:if="${contentIndexDto.content?.originType.name()} == 'NONE_ORIGIN'"
                     class="p-1 mb-2 text-black-50 rounded border border-light rounded-start rounded-3 shadow-sm bg-white small"><strong class="fw-bolder text-black-50">·</strong> 本文为转载内容
                    <span th:if="!${#strings.isEmpty(contentIndexDto.content?.noneOriginLink)}"
                          th:text="${'原文链接:' + contentIndexDto.content?.noneOriginLink}"></span>
                </div>
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
                    <div>
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <h5 class="text-wrap m-0" th:text="${contentIndexDto.content.title}"></h5>
                            </div>
                        </div>
                        <span th:if="!${#lists.isEmpty(contentIndexDto.tagDtoList)}">
                            <a th:each="tag : ${contentIndexDto.tagDtoList}"
                               class="badge bg-gradient rounded-3 fw-normal fw-normal bg-warning text-dark cv-link"
                               th:href="@{'/tag/'+${tag.tagName}}" th:text="${tag.tagName}" th:title="${tag.tagName}"></a>
                        </span>
                        <span th:include="fragments/index::contet_tag(${contentIndexDto.content})"></span>
                        <div th:replace="fragments/index::content_data_show(${contentIndexDto.content.userId},
                                                                            ${contentIndexDto.content.member.userName},
                                                                            ${contentIndexDto.content.member.via},
                                                                            ${contentIndexDto.content.contentData.viewNum},
                                                                            ${contentIndexDto.content.contentData.commentNum},
                                                                            ${contentIndexDto.content.createDate},
                                                                            ${contentIndexDto.content.editTimes}
                                                                            )"></div>
                        <div class="collapse" id="edit-reason">
                            <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 my-2">
                                <div class="text-black-50 small" th:if="${contentIndexDto.content.editTime > 0}">最新编辑时间: [[${contentIndexDto.content.editDate}]]</div>
                                <div class="text-black-50 small">最新编辑原因:</div>
                                <div class="cv-font-sm" th:if="!${#strings.isEmpty(contentIndexDto.content?.contentEditReason?.reason)}">[[${contentIndexDto.content?.contentEditReason?.reason}]]</div>
                                <div class="cv-font-sm" th:if="${#strings.isEmpty(contentIndexDto.content?.contentEditReason?.reason)}">无</div>
                            </div>
                        </div>
                        <article class="mt-1 cherry-markdown" style="font-size: 16px;overflow:hidden"
                             th:utext="${contentIndexDto.content.contentExtend.detailContent}"></article>
                        <hr class="border-bottom my-2"/>
                        <div th:if="${contentIndexDto.content?.originType.name()} == 'ORIGIN'" class="text-black-50 small" >
                            <span class="text-black-50">本作品系原创,采用<a target="_blank" class="cv-link text-black-50" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh">《署名-非商业性使用-禁止演绎4.0 国际》</a>许可协议.转载请说明出处</span>
                        </div>
                        <div>
                            <span class="text-black-50 small">
                                本文链接:<span id="content_url" class="text-black-50 text-wrap user-select-all" th:text="'https://www.upupor.com/u/'+${contentIndexDto.content.contentId}"></span>
                            </span>
                            <code id="btn_copy_url_code" style="cursor: pointer" class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark copy-url" data-clipboard-target="#content_url" onclick="copyContentUrl()">复制</code>
                        </div>
                    </div><!--card-->
                </div>
                <!--上一篇/下一篇-->
                <div class="list-group list-group-horizontal border-0 shadow-sm" th:if="${contentIndexDto.content.lastAndNextContentDto} != null">
                    <a class="list-group-item list-group-item-action flex-grow-1 text-start flex-fill cv-link text-truncate"
                       th:if="${contentIndexDto.content.lastAndNextContentDto.nextContent} != null"
                       th:href="'/u/'+${contentIndexDto.content.lastAndNextContentDto.nextContent.contentId}"
                       th:title="${contentIndexDto.content.lastAndNextContentDto.nextContent.title}"
                       th:inline="text">上一篇: 《[[${contentIndexDto.content.lastAndNextContentDto.nextContent.title}]]》</a>

                    <a class="list-group-item list-group-item-action flex-grow-1 text-start flex-fill cv-link text-truncate"
                       th:if="${contentIndexDto.content.lastAndNextContentDto.lastContent} != null"
                       th:href="'/u/'+${contentIndexDto.content.lastAndNextContentDto.lastContent.contentId}"
                       th:title="${contentIndexDto.content.lastAndNextContentDto.lastContent.title}"
                       th:inline="text">下一篇: 《[[${contentIndexDto.content.lastAndNextContentDto.lastContent.title}]]》</a>
                </div>
                <!--未登录提示-->
                <div th:if="!${session?.cv_user_id}" th:include="fragments/index::login_tips"></div>
                <div th:if="${contentIndexDto.content.status.name()} == 'NORMAL'" th:include="fragments/comment::commentList(${contentIndexDto.content.listCommentDto.commentList},
                                                                                                                            ${contentIndexDto.content.listCommentDto.paginationHtml},
                                                                                                                            ${contentIndexDto.content.listCommentDto.total},
                                                                                                                            false,
                                                                                                                            ${contentIndexDto.content.userId})"></div>
                <!--评论框-->
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 my-2" th:if="${session?.cv_user_id} and ${contentIndexDto.content.status.name() == 'NORMAL'}">
                    <div id="comment_area">
                        <div th:include="fragments/comment::comment_box(${contentIndexDto.content.contentId},${contentIndexDto.content.contentType.name()},'评论')"></div>
                    </div>
                </div>
                <!--推荐文章-->
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mt-2" th:if="!${#lists.isEmpty(contentIndexDto.randomContentList)}">
                    <div class="lead">推荐阅读</div>
                    <div th:replace="fragments/index::content_list(${contentIndexDto.randomContentList},false)"></div>
                </div>
            </div>
            <div class="col-lg-3">
                <div th:if="${contentIndexDto.createContentDesc != null}" th:include="fragments/index::create_content_url(${contentIndexDto.createContentDesc})"></div>
                <div th:include="fragments/index::global_search"></div>
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
                    <div class="text-black-50 border-bottom mb-2 pt-0">文章导航</div>
                    <nav aria-label="breadcrumb mb-0">
                        <ol class="breadcrumb mb-0">
                            <li th:each="type : ${contentTypeList}"
                                th:if="${contentIndexDto.content.contentType.name() == type.typeName}"
                                class="breadcrumb-item">
                                <a class="cv-link text-black-50" th:href="${type.url}">[[${type.name}]]</a>
                            </li>
                            <li class="breadcrumb-item" th:if="!${#lists.isEmpty(contentIndexDto.tagDtoList)}">
                                <a class="cv-link text-black-50" th:each="tagDto : ${contentIndexDto.tagDtoList}" th:href="@{'/'+${#strings.toLowerCase(contentIndexDto.content.contentType.name())}+'/'+${tagDto.tagId}}" th:text="${tagDto.tagName}" th:title="${tagDto.tagName}"></a>
                            </li>
                        </ol>
                    </nav>
                </div>
                <div th:if="${session?.is_admin}" class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
                    <div class="text-black-50 small border-0 border-bottom mt-0 mb-2">管理员专有权限</div>
                    <div class="media-right media-middle ms-1">
                        <a class="btn rounded-3 bg-gradient btn-sm btn-danger" th:href="'/user/admin/content/' + ${contentIndexDto.content.contentId}">管理文章</a>
                    </div>
                </div>
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2" th:if="${session?.cv_user_id == contentIndexDto.content.userId}">
                    <div class="text-black-50 small border-0 border-bottom mt-0 mb-2">操作</div>
                    <div class="media-right media-middle ms-1">
                        <a class="btn rounded-3 bg-gradient btn-sm btn-primary" th:href="@{'/editor?type='+${contentIndexDto.content.contentType.name()}+'&contentId='+${contentIndexDto.content.contentId}+'&edit=true'}">修改文章</a>
                    </div>
                </div>
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2" th:if="${contentIndexDto.content.status.name() == 'NORMAL'}">
                    <div class="text-black-50 border-bottom mb-2 pt-0" th:if="${session?.cv_user_id != contentIndexDto.content.userId}">点赞<span class="fw-bold mx-1">·</span>收藏</div>
                    <div class="text-black-50 border-bottom mb-2 pt-0" th:if="${session?.cv_user_id == contentIndexDto.content.userId}">本文收到的 点赞数 和 收藏数</div>
                    <div class="btn-group rounded-3 bg-gradient w-100">
                        <div th:if="${session?.cv_user_id == contentIndexDto.content.userId}">
                            <div>
                                <span class="me-3">
                                    <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark" th:text="${contentIndexDto.content.contentData.likeNum}"></span>
                                    <span class="text-black-50 m-1">个</span>
                                    <img th:data-src="${ossStatic} + @{/icons/system/zan.png}" class="lazyload cv-icon-item"/>
                                </span>
                                <span>
                                    <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark" th:text="${contentIndexDto.content.collectNum}"></span>
                                    <span class="text-black-50 m-1">个</span>
                                    <img th:data-src="${ossStatic} + @{/icons/system/collection.png}" class="lazyload cv-icon-item"/>
                                </span>
                            </div>
                        </div>
                        <div th:if="${session?.cv_user_id != contentIndexDto.content.userId}">
                            <!--点赞按钮-->
                            <a class="btn rounded-3 bg-gradient btn-sm btn-outline-warning text-dark" id="like_btn" th:onclick="like([[${contentIndexDto.content.contentId}]])">
                                <img th:data-src="${ossStatic} + @{/icons/system/zan.png}" class="lazyload cv-icon-item"/>
                                <span id="like_text" th:text="${contentIndexDto.currUserIsClickLike} == false ? '点赞':'已点赞'" >点赞</span>  <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark" id="like_badge" th:text="${contentIndexDto.content.contentData.likeNum}">集赞数</span>
                            </a>
                            <!--点赞按钮..end-->
                            <!--收藏按钮-->
                            <a class="btn rounded-3 bg-gradient btn-sm btn-outline-warning text-dark" th:onclick="collect([[${contentIndexDto.content.contentId}]])">
                                <img th:data-src="${ossStatic} + @{/icons/system/collection.png}" class="lazyload cv-icon-item"/>
                                <span id="collect_span_text" th:text="${contentIndexDto.currUserIsCollect} == false ? '收藏':'已收藏'"></span>  <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark" id="collect_badge" th:text="${contentIndexDto.content.collectNum}">收藏数</span>
                            </a>
                        </div>
                    </div>
                    <div id="sync_like_area" th:if="!${#lists.isEmpty(contentIndexDto.content.likesMemberList)}" th:fragment="sync_like_area">
                        <div class="border-0 mt-2 small text-black-50">以下用户觉得很赞:</div>
                        <span th:each="member : ${contentIndexDto.content.likesMemberList}">
                            <a class="cv-link" th:href="'/profile/'+${member.userId}+'/content'">
                                <span th:if="!${#strings.isEmpty(member.via)}"><img data-bs-toggle="popover" th:data-bs-content="${member.cardHtml}" class="lazyload img rounded cv-icon" th:data-src="${member.via}" th:alt="${member.userName}" /></span>
                            </a>
                        </span>
                    </div>
                </div>
                <!--访问者-->
                <div th:include="fragments/index::viewList(${contentIndexDto.content.viewerList})"></div>
                <!--如果作者有电台,跳转到作者电台列表-->
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2" th:if="${contentIndexDto.hasRadio}" th:inline="text">
                    <a class="cv-link text-black-50" th:href="'/profile/'+${contentIndexDto?.content?.userId}+'/radio'"><img class="lazyload cv-icon" th:data-src="${ossStatic} + @{/icons/system/radio.svg}">  [[${contentIndexDto.content.member.userName}]]的电台</a>
                </div>
                <!--跳转到作者的留言板-->
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2"  th:inline="text">
                    <a class="cv-link text-black-50" th:href="'/profile/'+${contentIndexDto?.content?.userId}+'/message'"><img class="lazyload cv-icon" th:data-src="${ossStatic} + @{/icons/system/goutong.png}">  [[${contentIndexDto.content.member.userName}]]的留言板</a>
                </div>
                <!--社交模板-->
                <div th:include="fragments/social::social_box('u/','文章',${contentIndexDto.content.contentId},${contentIndexDto.content.title})" th:if="${contentIndexDto.content.status.name() == 'NORMAL'}"></div>
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
                    <div>
                        <p style="text-align: center" class="m-0 p-1" th:if="!${#strings.isEmpty(contentIndexDto.content.member.via)}">
                            <a th:href="'/profile/'+${contentIndexDto.content.member.userId}+'/content'">
                                <img class="lazyload img rounded" th:data-src="${contentIndexDto.content.member.via}" style="width: 90px;height: 90px;"/>
                            </a>
                        </p>
                        <p style="text-align: center" class="m-0 p-1">
                            <a th:inline="text" th:href="'/profile/' + ${contentIndexDto.content.userId}+'/content'" class="text-black-50 cv-link" style="font-size: 14px">
                                [[${contentIndexDto.content.member.userName}]]
                            </a>
                        </p>
                        <div>
                            <p style="text-align: center" class="text-black-50 small m-0 p-1" th:if="!${#strings.isEmpty(contentIndexDto.content.member.lastLoginDate)}" th:inline="text">最近活跃: [[${contentIndexDto.content.member.lastLoginDate}]]</p>
                        </div>
                        <!--关注按钮-->
                        <button th:if="${session?.cv_user_id != contentIndexDto.content.userId} and !${contentIndexDto.currUserIsAttention}" class="btn rounded-3 bg-gradient btn-warning btn-sm w-100" th:onclick="attentionAuthor([[${contentIndexDto.content.userId}]])" id="attention_btn">
                            <span th:text="${contentIndexDto.currUserIsAttention} == false ? '关注作者':'已关注作者'" id="attention_tips"></span>
                        </button>
                        <!--关注按钮..end-->
                    </div>
                </div>
                <!--作者其他文章-->
                <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
                    <div>
                        <div class="text-black-50 border-bottom mb-2">[[${contentIndexDto.content.member.userName}]]的其他文章<a class="cv-link text-black-50 float-end" th:href="'/profile/'+${contentIndexDto.content.userId}+'/content'"><i class="bi bi-balloon"></i>全部</a></div>
                        <div th:if="${#lists.isEmpty(contentIndexDto.authorOtherContentList)}" th:include="fragments/index::empty_content"></div>
                        <div th:if="!${#lists.isEmpty(contentIndexDto.authorOtherContentList)}">
                            <div th:each="c,ite : ${contentIndexDto.authorOtherContentList}">
                                <a class="cv-link text-secondary up-text-overflow"
                                   th:href="'/u/'+${c.contentId}"
                                   th:title="${c.title}">[[${ite.count}]]. [[${c.title}]]</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:replace="fragments/index::user_manage_fragment(true)"></div>
                <div th:include="fragments/index::google_right_ad"></div>
            </div>
        </div>
    </div>
</div>
</html>
